import * as motion from "motion/react-client"


export default function AnimatedTextWord({ text }) {
    const words = text.split(" ");
    const charVariants = {
        hidden: {
          opacity: 0,
          y: 20, // 初始位置在上方
          transition: {
            type: "spring",
            stiffness: 300, // 调整刚度以创建弹跳效果
            damping: 20,    // 调整阻尼以控制弹跳的速度和次数
            delay: 0,       // 通常情况下，这里设置延迟，但由于我们要逐个处理字符，所以这里不使用
          }
        },
        visible: {
          opacity: 1,
          y: 0, // 最终位置在原位
        }
      };
       
    return (
        <motion.div >
            {words.map((word, index) => (
                <motion.span key={index} variants={charVariants}    animate={"visible"}
                initial={"hidden"}>
                    {word}
                </motion.span>
            ))}
        </motion.div>
    );
}
